Vue Js Modal Popup on Click: A Vue js Modal Popup is a user interface component that displays a dialog box on top of the current page content. The modal is designed to capture the user’s attention and prompt them to take a specific action or provide additional information. Vue.js provides a straightforward way to implement a Vue Js Modal Popup component, allowing developers to quickly create customizable dialog boxes. The modal can be triggered by a button click, a link, or other user interactions. The content of the modal can be fully customized, allowing for the inclusion of images, forms, videos, or any other type of content.
How to create Vue Js modal popup ?
This code is a Vue.js application that creates a Vue Js Modal popup with a button to open and close it.
When the page loads, the popup is hidden (showPopup
is set to false
).
When the “Open Popup” button is clicked, the openPopup
method sets showPopup
to true
, which displays the popup.
The popup is contained within a div with the class “popup-container”, which is fixed to the top left of the screen and has a semi-transparent black background. The popup itself has a white background and a box shadow, and is centered in the middle of the screen.
The popup has a heading and some text, as well as a button to close it. When the “Close” button is clicked, the closePopup
method sets showPopup
to false
, which hides the popup.
Vue Js Modal Popup -HTML Code
<div id="app">
<button class="popup-button" @click="openPopup">Open Popup</button>
<div class="modal" v-if="showPopup">
<div class="modal-content" ref="modalRef">
<button class="close-x" @click="closePopup"> X</button>
<div class="modal-header">
<h1>Vue Js Modal Popup</h1>
</div>
<div class="modal-body">
<p>This is some text inside the popup.</p>
</div>
<div class="modal-footer">
<button class="close-button" @click="closePopup">Close</button>
<button class="save-button" @click="saveModal">Save</button>
</div>
</div>
</div>
</div>
Output of Vue Js Modal Popup Example
![](https://danatec.vn/wp-content/uploads/2024/07/1-13.webp)
Creating Vue Js Modal Popup – JavaScript Code
The provided code snippet is an example of implementing a Vue Js modal popup.
The code sets up a Vue application and defines a data property called showPopup
to control the visibility of the modal. The openPopup
method is used to display the modal by setting showPopup
to true
.
When the user clicks outside the modal, the closeModalOnClickOutside
method is triggered and checks if the clicked element is within the modal. If not, the closePopup
method is called to hide the modal by setting showPopup
to false
.
Additionally, there is a saveModal
method that displays an alert message and then calls closePopup
to hide the modal.
Vue Js Modal Popup -Javascript Code
<script type="module" >
const app = Vue.createApp({
data() {
return {
showPopup: false,
}
},
methods: {
saveModal() {
alert('Successfully Save data')
this.closePopup();
},
openPopup() {
this.showPopup = true;
document.addEventListener('mouseup', this.closeModalOnClickOutside);
},
closePopup() {
this.showPopup = false;
document.removeEventListener('mouseup', this.closeModalOnClickOutside);
},
closeModalOnClickOutside(event) {
const modal = this.$refs.modalRef;
if (!modal.contains(event.target)) {
this.closePopup();
}
}
},
});
app.mount('#app');
</script>
Creating a Stylish Vue Js Modal Popup: CSS Code Tutorial
To create a stylish Vue js modal popup, you can apply CSS code to customize its appearance. Start by defining a class for the modal container and set its position, dimensions, and background.
Add a class for the modal content, specifying its width, padding, and background color. Use the z-index property to position the modal above other elements.
Apply transitions for smooth animations when the modal opens and closes. Finally, use JavaScript to toggle the visibility of the modal based on user actions. With these CSS modifications, you can create an attractive and visually appealing Vue js modal popup to enhance the user experience.
Vue Js Modal Popup -Css Code
.popup - button {
padding: 10px 20px;
background - color: #007bff;
color: #fff;
border: none;
border - radius: 4px;
cursor: pointer;
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background - color: rgba(0, 0, 0, 0.5);
display: flex;
align - items: center;
justify - content: center;
z - index: 9999;
}
.modal - content {
background - color: white;
padding: 20px;
border - radius: 5px;
max - width: 500px;
width: 80 %;
position: relative;
}
.close - x {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
background - color: transparent;
border: none;
cursor: pointer;
font - size: 18px;
color: #555;
}
.close - x:hover {
color: #ff0000;
/* Change to your desired hover color */
}
.modal - header {
padding - bottom: 10px;
border - bottom: 1px solid #ccc;
}
.modal - body {
padding: 10px 0;
}
.modal - footer {
padding - top: 10px;
border - top: 1px solid #ccc;
display: flex;
justify - content: flex - end;
}
.close - button,
.save - button {
padding: 10px 20px;
border: none;
cursor: pointer;
font - weight: bold;
border - radius: 4px;
transition: background - color 0.3s ease;
}
.close - button {
background - color: #f44336;
color: white;
}
.save - button {
background - color: #4CAF50;
color: white;
margin - left: 10px;
}
.close - button:hover {
background - color: #d32f2f;
}
.save - button:hover {
background - color: #45a049;
}